<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bar Viking</title>
        <link rel="shortcut icon" href="../resources/images/yellow_helmet_favicon.ico">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script src="../resources/js/validate.js"></script>
        <script src="../resources/js/logIn.js"></script>
        <script src="../resources/js/admin.js"></script>
        <script src="../resources/js/index.js"></script>
        <script src="../resources/js/header.js"></script>
        <script type="text/javascript" src="../libraries/instafeed.min.js"></script>
        <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <link rel="stylesheet" type="text/css" href="../resources/css/default_stian.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <?php include '../resources/templates/header.php' ?>
        <div id="content-wrapper">
            <article id="content" style="text-align: center;">
                <div id="search-wrapper">
                    <input type="text" id="search-box" placeHolder ="Søk etter bar eller sted" autofocus>
                    <button id="searchBtn" class="search-btn" title="Søk"><img src="../resources/images/magn_glass_white.svg"></button>
                </div>
                <div id="billboard">
                    <div class="billboard-class" id="billboard-1">
                        <table class="billboard-table">
                            <tr>
                                <td class="billboard-image" rowspan="3"><img id="billboard-image-1" src="../resources/images/image_missing.png"></td>
                                <td class="billboard-header" id="billboard-header-1">Ukens bar</td>
                            </tr>
                            <tr>
                                <td class="billboard-content" id="billboard-content-1"></td>
                            </tr>
                            <tr>
                                <td class="billboard-dots" id="billboard-dots-1">
                                    <svg class="content-dot content-dot-1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                        <path class="dot-path-1" d="M-0.088 512c0-141.5 114.5-256 256-256 141.438 0 256 114.5 256 256s-114.562 256-256 256C114.413 768-0.088 653.5-0.088 512z"/>
                                    </svg>
                                    <svg class="content-dot content-dot-2" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                        <path class="dot-path-2" d="M-0.088 512c0-141.5 114.5-256 256-256 141.438 0 256 114.5 256 256s-114.562 256-256 256C114.413 768-0.088 653.5-0.088 512z"/>
                                    </svg>
                                    <svg class="content-dot content-dot-3" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                        <path class="dot-path-3" d="M-0.088 512c0-141.5 114.5-256 256-256 141.438 0 256 114.5 256 256s-114.562 256-256 256C114.413 768-0.088 653.5-0.088 512z"/>
                                    </svg>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="billboard-class" id="billboard-2">
                        <table class="billboard-table">
                            <tr>
                                <td class="billboard-image" rowspan="3"><img id="billboard-image-2" src="../resources/images/image_missing.png"></td>
                                <td class="billboard-header" id="billboard-header-2">Tilfeldig bar</td>
                            </tr>
                            <tr>
                                <td class="billboard-content" id="billboard-content-2"></td>
                            </tr>
                            <tr>
                                <td class="billboard-dots" id="billboard-dots-2">
                                    <svg class="content-dot content-dot-1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                        <path class="dot-path-1" d="M-0.088 512c0-141.5 114.5-256 256-256 141.438 0 256 114.5 256 256s-114.562 256-256 256C114.413 768-0.088 653.5-0.088 512z"/>
                                    </svg>
                                    <svg class="content-dot content-dot-2" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                        <path class="dot-path-2" d="M-0.088 512c0-141.5 114.5-256 256-256 141.438 0 256 114.5 256 256s-114.562 256-256 256C114.413 768-0.088 653.5-0.088 512z"/>
                                    </svg>
                                    <svg class="content-dot content-dot-3" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                        <path class="dot-path-3" d="M-0.088 512c0-141.5 114.5-256 256-256 141.438 0 256 114.5 256 256s-114.562 256-256 256C114.413 768-0.088 653.5-0.088 512z"/>
                                    </svg>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="billboard-class" id="billboard-3">
                        <table class="billboard-table">
                            <tr>
                                <td class="billboard-image" rowspan="3"><img id="billboard-image-3" src="../resources/images/mapbarcrawl.jpg"></td>
                                <td class="billboard-header" id="billboard-header-3">Bar Viking anbefaler</td>
                            </tr>
                            <tr>
                                <td class="billboard-content" id="billboard-content-3">
                                    <div class='billboard-content-header'>Barcrawl</div>
                                    <div class='billboard-content-description'>
                                    Planlegger du en helaften på byen, men tiden er knapp og du vet ikke hvor du skal dra?<br>
                                    Eller er du på jakt etter en ny stamplass, men ikke ofte nok ute til å oppleve alt? <br>
                                    Løsningen er å dra på barcrawl. La oss sette opp en rute du kan følge. Trykk på knappen under for<br>
                                    å hente en rute og tilpass den etter dine behov. God tur!<br>
                                    
                                    </div>                                
                                </td>
                            </tr>
                            <tr>
                                <td class="billboard-dots" id="billboard-dots-3">
                                    <svg class="content-dot content-dot-1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                        <path class="dot-path-1" d="M-0.088 512c0-141.5 114.5-256 256-256 141.438 0 256 114.5 256 256s-114.562 256-256 256C114.413 768-0.088 653.5-0.088 512z"/>
                                    </svg>
                                    <svg class="content-dot content-dot-2" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                        <path class="dot-path-2" d="M-0.088 512c0-141.5 114.5-256 256-256 141.438 0 256 114.5 256 256s-114.562 256-256 256C114.413 768-0.088 653.5-0.088 512z"/>
                                    </svg>
                                    <svg class="content-dot content-dot-3" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                                        <path class="dot-path-3" d="M-0.088 512c0-141.5 114.5-256 256-256 141.438 0 256 114.5 256 256s-114.562 256-256 256C114.413 768-0.088 653.5-0.088 512z"/>
                                    </svg>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="content-box">
                    <header id="top-rated-bars-header"><img class="content-box-icon" src="../resources/images/beer_white.svg">Topp 5 barer</header>
                    <article id='top-rated-bars-article'>
                        <div id='top-rated-top-hit-container' class='top-hit' style='float: left; padding: 10px 0 10px 0;'>
                            <div style='display: inline-block;'><img src='../resources/images/image_missing.png' class="top-hit-img" id='top-rated-top-hit-img'></img></div>
                            <div id='top-rated-top-hit' style='text-align: left; vertical-align: top; display: inline-block;'></div>
                        </div>
                        <table id="top-rated-bars" class="responsive-table">
                            <tr>
                                <th>Navn</th>
                                <th>Sted</th>
                                <th>Rating</th>
                                <th>Aldersgrense</th>
                            </tr>
                        </table>
                    </article>
                </div>
                <div class='content-box'>
                    <header id='top-rated-bars-nearby-header'><img class="content-box-icon" src="../resources/images/beer_white.svg">Topp 5 barer i nærheten</header>
                    <article id='top-rated-bars-nearby-article'>
                        <div id='top-rated-nearby-top-hit-container'  class='top-hit' style='float: left; padding: 10px 0 10px 0;'>
                            <div style='display: inline-block;'><img src='../resources/images/image_missing.png' class="top-hit-img" id='top-rated-nearby-top-hit-img'></img></div>
                            <div id='top-rated-nearby-top-hit' style='text-align: left; vertical-align: top; display: inline-block;'></div>
                        </div>
                        <table id="top-rated-bars-nearby" class="responsive-table">
                            <tr>
                                <th>Navn</th>
                                <th>Avstand</th>
                                <th>Rating</th>
                                <th>Aldersgrense</th>
                            </tr>
                        </table>
                    </article>
                </div>
                
                <div id="happenings-near-you-wrapper" class="content-box">
                    <header id="happenings-near-you-header"><img class="content-box-icon" src="../resources/images/calendar_white.svg">Arrangementer nær deg</header>
                    <article>
                        <table id="happenings-near-you" class="responsive-table">
                            <tr>
                                <th>Hva</th>
                                <th>Hvor</th>
                                <th>Når</th>
                                <th>Pris</th>
                                <th style="width: 400px;">Beskrivelse</th>
                            </tr>
                        </table>
                    </article>
                </div>
            </article>
        </div>
<!--        This span is used to measure the window-width correctly. Do not remove-->
        <span class="windowWidth"></span>
        <div id="instafeed">
            <script type="text/javascript">
                var feed = new Instafeed({
                    get: 'tagged',
                    tagName: 'awesome',
                    limit: 10,
                    clientId: '585eb09087af49048cf6d755ab2c6e98',
                    template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>'
                });
                feed.run();
            </script>
            <div id="hashtag" style="color: lightgrey;">#barviking</div>
        </div>
        <?php include '../resources/templates/footer.php' ?>
    </body>
</html>